---
title: Selects
description: Versatile and customizable select components built with Tailwind CSS v4. These responsive dropdown menus and form selects are perfect for filtering data, user preferences, and form controls in modern web applications. Optimized for accessibility, SEO, and mobile usability.
category: application
emoji: 📣
slug: selects
wrapper: h-[400px]
terms:
  - dropdown
  - filter
  - form
components:
  - { title: 'Base', dark: true, plugins: ['@tailwindcss/forms'] }
  - { title: 'Option groups', dark: true, plugins: ['@tailwindcss/forms'] }
  - { title: 'Datalist', dark: true, plugins: ['@tailwindcss/forms'] }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Select Components

  <div class="max-w-prose text-pretty">
    These use the native `<select>` elements. In the future, we should be able to apply a more custom look and feel. Based on [Google I/O CSS Update](https://developer.chrome.com/blog/whats-new-css-ui-2023/#selectmenu).
  </div>

  <p>{frontmatter.description}</p>
</CollectionHeader>
